<script setup>
import {onMounted, ref} from "vue";
import {useInfoStore} from "@/stores/user.js";
import {Message} from "@arco-design/web-vue";
import Http from "@/http/http.js";
import {useRouter} from 'vue-router'
import {utf8_to_b64} from "@/until/tool.js";

const router = useRouter()

const formState = ref({
  user: "",
  password: "",
})

const isShow = ref(false)

onMounted(() => {

})

const onLogin = async () => {
  let userForm = utf8_to_b64(JSON.stringify(formState.value))
  const res = await Http.userLogin({user: userForm});
  if (!res) return;
  if (res["Msg"] !== "OK") {
    Message.error(res["Msg"]);
  } else {
    useInfoStore().setUserInfoBase(res.Data)
    Message.success("登录成功!");
    window.open("/member/home", "_top");
  }
}


</script>


<template>
  <div class="body">
    <template v-if="isShow">
      <div class="preloader">
        <div class="cs-loader">
          <div class="cs-loader-inner">
            <div class="">
              <img src="//192.168.1.121:9045/upload/svg/ioa.svg" alt="">
            </div>
            <label> ●</label><label> ●</label><label> ●</label><label> ●</label><label> ●</label><label> ●</label></div>
        </div>
      </div>
    </template>
    <div v-else>
      <div class="title">网站会员登录</div>
      <a-form :model="formState"
              auto-label-width
      >
        <a-form-item field="user" label="账户"
                     :rules="[{required:false,message:'请输入登录账户!'},{minLength:5,message:'至少五位'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model.trim="formState.user" placeholder="请输入您的登录账户"/>
        </a-form-item>
        <a-form-item field="password" label="密码"
                     :rules="[{ required: false, message: '请输入您的密码!' },{minLength:6,message:'请输入正确的密码!'}]"
        >
          <a-input-password v-model.trim="formState.password" placeholder="请输入密码"/>
        </a-form-item>
        <!--
                <div style="text-align: right;cursor: pointer" @click="router.push('/register')">注册新用户</div>
        -->
        <a-form-item :wrapper-col="{ offset: 5, span: 16 }">
          <a-space>
            <a-button type="primary" :disabled="formState.password.length<6 || formState.user.length<4" @click="onLogin()">
              登录
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.body {
  width:               100vw;
  height:              100vh;
  display:             flex;
  flex-direction:      column;
  justify-content:     center;
  align-items:         center;
  background-image:    url("../assets/bg.svg");
  background-repeat:   no-repeat;
  background-position: center 110px;
  background-size:     100%;

  .title {
    padding-bottom: 24px;
    font-weight:    500;
    font-size:      24px;
    }

  div {
    text-align: center;
    }
  }
</style>
